<template>
  <el-card class="footer_fields_card" v-if="isShowCard" shadow="never">
    <el-row>
      <span>单据号：{{fields.recordNo}}</span>
      <span>审核状态：{{fields.commitStateStr}}</span>
      <span>提交人：{{fields.pusherName}}</span>
      <span>提交时间：{{fields.pushTime}}</span>
      <span>提交部门：{{fields.pusherDeptName}}</span>
      <span>区域：{{fields.pusherAreaName}}</span>
      <template v-if="isShowAuditFields">
        <span>审批人：{{fields.auditorName}}</span>
        <span>审批时间：{{fields.auditTime}}</span>
        <span v-if="isShowReason">{{`${reasonLabel}：`}}{{fields.auditReason}}</span>
      </template>
      <slot name="extra-fields" />
    </el-row>
  </el-card>
</template>
<script>
import { getFooterFieldsService } from '@/api/commodity/common';
import { getFooterFieldsByReprocessed } from '@/utils/getUtils';
export default {
  props: {
    footerFields: { // 表尾字段，默认{}
      type: Object,
      default () { return {} }
    },
    fieldKeys: { // 表尾字段别名key集合，默认{}
      type: Object,
      default () { return {} }
    },
    recordNo: { // 单据号，默认''
      type: String,
      default: ''
    },
    isSpecialFields: { // 是否有特殊字段，默认false
      type: Boolean,
      default: false
    },
    canShowReason: { // 是否特殊展示原因字段，默认不展示
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      fields: this.footerFields
    }
  },
  computed: {
    // 有传入的footerFields
    hasPropFields () {
      return Object.keys(this.footerFields).length !== 0;
    },
    // 展示表尾字段card
    isShowCard () {
      if (this.hasPropFields || this.recordNo) { return true; }
      return false;
    },
    // 展示审核相关字段信息
    isShowAuditFields () {
      const isAudited = this.fields.commitState === 'OK' || this.fields.commitState === 'FAIL'; // 审核成功或审核失败
      const hasAuditor = !!this.fields.auditorName; // 有审核人名称
      if (isAudited && hasAuditor) { return true };
      return false;
    },
    isShowReason () {
      // 审批失败或者有特殊展示需要时进行原因字段的展示
      return this.fields.commitState === 'FAIL' || this.canShowReason;
    },
    // 原因字段标签名
    reasonLabel () {
      if (this.fields.reasonLabel) { return this.fields.reasonLabel }; // 有自己的label优先展示
      if (this.fields.commitState === 'FAIL') { return '审批失败原因' }; // 审核失败label
      return '原因'; // 备用label
    }
  },
  watch: {
    recordNo: {
      immediate: true,
      handler (val) {
        if (val) {
          this.getFooterFieldsInfo(val);
        }
      }
    },
    footerFields (val) {
      if (this.isSpecialFields) { // 有特殊字段时，不再调用生成字段方法
        this.fields = val;
      } else { // 通过生成字段方法获取字段信息，可以扩展其他名字的相关字段
        this.fields = getFooterFieldsByReprocessed(val, this.fieldKeys);
      }
    }
  },
  methods: {
    // 获取表尾字段信息
    async getFooterFieldsInfo (recordNo) {
      if (!recordNo) { return false; } // 没有单据号就不进行查询
      const retData = await getFooterFieldsService({ recordNo }, '.footer_fields_card');
      if (retData) {
        this.fields = getFooterFieldsByReprocessed(retData);
      }
    },
    // 清空表尾展示内容
    clearFields () {
      this.fields = {};
    }
  }
}
</script>
<style lang="less" scoped>
.footer_fields_card {
  margin-top: 10px;
  span {
    display: inline-block;
    margin-right: 30px;
  }
}
</style>
